<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-11-07 14:48:32
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-07 22:34:24
 * @FilePath: /grid-center-datav/src/components/HistoryLine/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts">
export default {
    name: 'HistoryLine'
};
</script>
<script lang="ts" setup>
import { ref, nextTick, watch, onMounted } from 'vue';
import bluePoint from './blue-point.png';
import greenPoint from './green-point.png';
import orangePoint from './orange-point.png';
// swiper@8.4.3
import Swiper, { Autoplay, type SwiperOptions } from 'swiper';
Swiper.use([Autoplay]);

const props = withDefaults(
    defineProps<{
        showTime?: boolean;
        list: {
            date: string;
            style: 'blue' | 'green' | 'orange';
            text?: string;
            data: any;
        }[];
        // autoScroll?: boolean;
    }>(),
    {
        showTime: false,
        list: () => []
        // autoScroll: false
    }
);

let swiper: Swiper | null = null;
const scrollerItemView = ref<HTMLDivElement | null>(null);

const defaultOptions: SwiperOptions = {
    slidesPerView: 'auto',
    direction: 'vertical',
    speed: 2000,
    loop: true,
    autoplay: {
        delay: 0,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
    }
    // freeMode: true
    // on: {
    //     click: (...rest) => {
    //         console.log(rest);
    //     }
    // }
};

const initSwiper = () => {
    if (swiper) {
        // 销毁对象
        swiper.destroy();
        swiper = null;
    }
    nextTick(() => {
        // console.log(scrollerItemView.value);
        if (scrollerItemView.value) {
            const parentH = scrollerItemView.value.offsetHeight;
            let childrenH = 0;
            scrollerItemView.value
                .querySelectorAll('.swiper-slide')
                .forEach((el) => {
                    childrenH += (el as HTMLDivElement).offsetHeight;
                });
            // console.log(
            //     scrollerItemView.value,
            //     scrollerItemView.value.querySelectorAll('.swiper-slide')
            // );
            if (childrenH > parentH) {
                swiper = new Swiper(
                    scrollerItemView.value,
                    defaultOptions
                    // Object.assign(defaultOptions, options.value)
                );
                // this.swiper.el.onmouseover = () => {
                //     this.swiper.autoplay.stop();
                // };
                // this.swiper.el.onmouseleave = () => {
                //     this.swiper.autoplay.start();
                // };
            }
        }
    });
};

watch(
    () => props.list,
    () => {
        initSwiper();
    },
    {
        deep: true
    }
);

const excuteStyle = (style: 'blue' | 'green' | 'orange') => {
    if (style === 'blue') {
        return bluePoint;
    } else if (style === 'green') {
        return greenPoint;
    }
    return orangePoint;
};

onMounted(() => {
    initSwiper();
});
</script>

<template>
    <div class="historyline-container swiper" ref="scrollerItemView">
        <div class="swiper-wrapper">
            <div
                class="item swiper-slide"
                v-for="(item, index) in props.list"
                :key="index"
            >
                <div class="flex flex-row ai-center mr12">
                    <div class="date" v-if="showTime">{{ item.date }}</div>
                    <div class="point">
                        <img :src="excuteStyle(item.style)" alt="point" />
                    </div>
                </div>
                <div class="fx1">
                    <slot name="default" :row="item">
                        <div class="text">{{ item.text }}</div>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.historyline-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // overflow-y: auto;
    .item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        overflow: hidden;
        height: auto;
        .date {
            font-size: vh(12);
            color: rgba(255, 255, 255, 0.6);
            white-space: nowrap;
            margin-right: vh(15);
        }
        .point {
            width: vh(17);
            height: vh(20);
            position: relative;
            img {
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 10;
            }
            &::after {
                content: '';
                position: absolute;
                left: vh(8);
                top: vh(21);
                opacity: 0.2;
                background: #ffffff;
                width: vh(1);
                height: vh(200);
            }
        }
        .text {
            font-size: vh(16);
            color: #ffffff;
        }
    }
}
</style>
